<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        left: 0px;
        top: 0px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      // document.addEventListener('DOMContentLoaded') // DOM加载完毕执行
      // 定义一个运动函数
      //  ele:对象       dir:方向    target：移动距离
      function move(ele, dir, target) {
        return new Promise((resolve) => {
          ele.style.transition = "all 1s"; // 设置元素的过渡  all 全部
          ele.style[dir] = target;
          // 过渡结束的时间函数
          //   ele.addEventListener("transitionend", function () {
          // console.log('过渡结束了');
          // cb && cb();
          //   });
          ele.addEventListener("transitionend", resolve);
        });
      }

      let boxEle = document.querySelector(".box");
      boxEle.onclick = function () {
        // 点击之后触发 方块的运动
        // 调用move函数
        // move(boxEle, "left", "300px", function () {
        //   console.log("运动完成");
        //   move(boxEle, "top", "300px", function () {
        //     console.log("运动完成");
        //     move(boxEle, "left", "0px", function () {
        //       console.log("运动完成");
        //       move(boxEle, "top", "0px", function () {
        //         console.log("运动完成");
        //       });
        //     });
        //   });
        // });

        move(boxEle, "left", "300px")
          .then(() => {
            console.log("运动结束111");
            return move(boxEle, "top", "300px");
          })
          .then(() => {
            console.log("运动结束222");
            return move(boxEle, "left", "0px");
          })
          .then(() => {
            console.log("运动结束333");
            return move(boxEle, "top", "0px");
          })
          .then(() => {
            console.log("运动结束了");
          });
      };
    </script>
  </body>
</html>
